<template>
  <div class="wraper">
    <div class="top">
      <span class="left">福利专栏</span>
      <span class="right">查看更多></span>
    </div>
    <div class="picwraper">
      <swiper :options="swiperOption"  ref="mySwiper" class="picwraper">  
          <swiper-slide v-for="item in articles" :key="item.id" class="pic"> 
              <img v-lazy="item.picture">
              <span>{{item.title}}</span>
          </swiper-slide>
      </swiper> 
    </div> 
</div>
</template>
<script>
export default {
  props: {
    articles: {
      type: Array,
      default: []
    }
  },
 
  data() {
    return {
      swiperOption: {
        slidesPerView: 2,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true,
      }
    };
  },
};
</script>
<style lang="less" scoped>
.wraper {
  width: 7.5rem;
  height: 3.15rem;
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;
  .top {
    height: 0.45rem;
    margin-bottom: 0.2rem;
    .left {
      float: left;
      font-size: 0.32rem;
      color: #232323;
    }
    .right {
      float: right;
      font-size: 0.26rem;
      color: #707070;
      line-height: 0.45rem;
    }
  }
  .picwraper {
    height: 2.2rem;
    .pic {
      position: relative;
      float: right;
      img {
        height: 2.2rem;
        width: 3.3rem;
      }
      span {
        position: absolute;
        font-size: 0.24rem;
        color: #000;
        line-height: 0.33rem;
        bottom: 0.34rem ;
        left: 50%;
        transform: translate(-50%);
        z-index: 1;
      }
    }
  }
}
</style>

